<template>
  <div class="card" @click.stop="handleCardClick">
    <div class="head">
      <div class="left" :title="`${item.userName}(${item.userNo})`">
        <i class="el-icon-chat-dot-square"></i>{{ item.userName }}
      </div>
      <div class="right">{{ item.time }}</div>
    </div>
    <div class="body">
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="content" v-if="editing"> </el-input>
      <template v-else>{{ item.content }}</template>
    </div>
    <div class="foot">
      <i
        class="el-icon-chat-square"
        title="回复"
        @click.stop="reply(item)"
        v-if="cardType === 'comment' && !editing"
      ></i>
      <i class="el-icon-edit-outline" title="修改" @click.stop="edit(item)" v-if="!editing"></i>
      <i class="el-icon-close" title="删除" @click.stop="remove(item)" v-if="!editing"></i>
      <i class="el-icon-back" title="取消" @click.stop="cancle(item)" v-if="editing"></i>
      <i class="el-icon-check" title="确认" @click.stop="confirm(item)" v-if="editing"></i>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import { fetchComments, addReply, removeComment, updateComment, removeReply, updateReply } from '@/api'
import { Message, MessageBox } from 'element-ui'

export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    cardType: {
      type: String,
      default: 'comment'
    },
    commentId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      statusMap: {},
      editing: false,
      content: ''
    }
  },
  methods: {
    handleCardClick() {
      this.$emit('card-click')
    },
    reply(item) {
      tinymce.activeEditor.windowManager.open({
        title: `请输入回复内容`,
        size: 'normal',
        body: {
          type: 'panel',
          items: [{ type: 'input', name: 'content', label: '' }]
        },
        buttons: [
          { type: 'cancel', name: 'cancel', text: '取消' },
          { type: 'submit', name: 'save', text: '确定', primary: true }
        ],
        initialData: {
          content: ''
        },
        async onSubmit(e) {
          const { content } = e.getData()
          if (!content || !content.trim()) {
            Message.warning('请输入回复内容')
            return
          }

          await addReply({ content, commentId: item.id })
          await fetchComments()
          tinymce.activeEditor.notificationManager.open({
            timeout: 1500,
            text: '保存成功!',
            type: 'success'
          })
          e.close()
        }
      })
    },
    edit(item) {
      this.content = item.content
      this.editing = true
    },
    cancle() {
      this.editing = false
    },
    async remove(item) {
      try {
        await MessageBox.confirm(`是否删除批注?`, '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,
          type: 'warning'
        })
        if (this.cardType === 'comment') {
          removeComment(item.id)
        } else {
          removeReply(item.id)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async confirm(item) {
      const data = { ...item, content: this.content }
      if (this.cardType === 'comment') {
        await updateComment(data)
      } else {
        data.commentId = this.commentId
        await updateReply(data)
      }
      this.editing = false
    }
  }
}
</script>

<style scoped>
.card:hover {
  background: #eefafe;
}
.card {
  padding: 10px;
}
.el-icon-close {
  color: red;
}
.el-icon-chat-dot-square {
  font-size: 17px;
  margin-right: 5px;
}
.card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .head .left {
  font-size: 15px;
  font-weight: bold;
  display: inline-flex;
}
.card .head .right {
  font-size: 14px;
  color: #999;
}
.card .body {
  margin: 6px 0;
  font-size: 14px;
  color: #666;
}
.card .foot {
  display: flex;
  justify-content: flex-end;
}
.card .foot i {
  font-size: 14px;
  margin: 0 6px;
  cursor: pointer;
}
</style>
